<template>
    <div class="newshoes">
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in bannerlist.list" :key="item.id">
                    <!-- <img :src="`https://images.weserv.nl/?url=${item.banner_img}`" /> -->
                    <img :src="item.banner_img" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- <div class="newperson">
            <div class="top_style">
                <div class="left-box"><span>新人专享</span></div>
            </div>
            <div class="welfare">
                <img src="@/assets/2.jpg" alt="" />
            </div>
        </div> -->
        <div class="shopping-list">
            <div class="navs-list">
                <ul>
                    <li v-for="item in goodslist.list" :key="item.gid" @click="goShoppingDetail(item.gid)">
                        <div class="shopping-box">
                            <div class="img_box">
                                <!-- <img src="https://s1.vika.cn/space/2022/10/01/aac3293ca95b4de5891b878ff6da02ce?attname=017aaff497fe80bc93c14cd484bab3ad67.jpg" alt="" /> -->
                                <!-- <img :src="`https://images.weserv.nl/?url=${item.goods_img}`" alt="" /> -->
                                <img :src="item.goods_img" alt="" />
                            </div>
                            <p class="shopping-title">{{ item.goods_name }}</p>
                            <div class="shopping-price">
                                <span class="discount">￥{{ item.goods_price }}</span>
                                <span class="original">￥{{ item.goods_price - 0 + 200 }}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getBannerList, getNavList, getHomeList } from "../../../api/index";
import { useUserInfo } from "../../../store/user";

// 创建路由实例
let route = useRoute();
let router = useRouter();
const store = useUserInfo();

let bannerlist = reactive({ list: {} });
let goodslist = reactive({
    list: {},
});

//去商品详情
const goShoppingDetail = (gid: number) => {
    let look = localStorage.getItem("user_look");
    if (look === null) {
        let lookArr = gid;
        localStorage.setItem("user_look", JSON.stringify(lookArr.toString()));
        store.getUserLook(lookArr.toString());
        // console.log("1.0", store.$state.user_look);
    } else {
        let lookArr = JSON.parse(localStorage.getItem("user_look")).split(",");
        // console.log("1.0", lookArr);
        lookArr.push(gid.toString());
        let Myset = new Set(lookArr);
        // console.log("2.0", Myset);
        lookArr = Array.from(Myset);
        localStorage.setItem("user_look", JSON.stringify(lookArr.toString()));
        store.getUserLook(lookArr.toString());
        // console.log("1.0", store.$state.user_look);
    }
    router.push({
        name: "detail",
        query: {
            gid,
        },
    });
};

getBannerList().then((res: any) => {
    bannerlist.list = res.content;
});

let data = {
    goods_type: route.query.goods_type,
};
getHomeList(data).then((res: any) => {
    // console.log(res.result);
    goodslist.list = res.result;
});
</script>

<style lang="scss" scoped>
.newshoes {
    width: 100%;
    margin-top: 125px;
    padding-bottom: 50px;
    .banner {
        width: 100%;
        height: 150px;
        padding: 0 10px;
        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
            height: 150px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .newperson {
        width: 100%;
        padding: 0 10px;
        .top_style {
            position: relative;
            width: 100%;
            padding: 10px 0;
            .left-box {
                font-size: 18px;
                font-weight: bold;
                padding-left: 15px;
                &::before {
                    content: "";
                    position: absolute;
                    top: 14px;
                    left: 0;
                    display: inline-block;
                    border: 2px solid #000;
                    height: 15px;
                }
            }
        }
        .welfare {
            width: 100%;
            height: 125px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .shopping-list {
        width: 100%;
        padding: 20px 10px 0;
        .navs {
            height: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            li {
                height: 100%;
                line-height: 25px;
                position: relative;
                // overflow: hidden;
                // flex-grow: 1;
                width: calc(100% / 6);
                text-align: center;
                font-size: 15px;
                color: #313131;
                font-weight: bold;
            }
            .active {
                font-size: 18px;
                font-weight: bold;
                color: #c7273a;

                &::before {
                    position: absolute;
                    bottom: -6px;
                    left: 21px;
                    content: "";
                    display: block;
                    border: 2px solid #c7273a;
                    width: 12px;
                }
            }
        }
        .navs-list {
            width: 100%;
            // height: 300px;
            // border: 1px solid #000;
            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            li {
                width: 48%;
                // height: 300px;
                padding-bottom: 25px;
            }
            .shopping-box {
                .img_box {
                    width: 100%;
                    height: 200px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .shopping-title {
                margin: 15px 0 5px;
                line-height: 17px;
                height: 34px;
                font-size: 13px;
                color: #313131;
                overflow: hidden;
                // text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
            .shopping-price {
                font-size: 13px;
                color: #c7273a;
                span {
                    padding-right: 10px;
                }
            }
            .original {
                text-decoration: line-through;
                color: #999;
            }
        }
    }
}
</style>
